<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的淘宝</title>
</head>
<style>
    body {
        width: 800px;
        margin: 0 auto;
        float: left;
    }

    #site-nav {
        /* background-color: red; */
        padding: 10px;
    }

    .logo-search {
        display: flex;
        /* 
         这个属性可以使得元素成为一个Flex容器，使其子元素可以使用
         Flex布局模式
        */
        justify-content: space-between;
        /*
         justify-content用于设置或检索弹性盒子在主轴(横轴)
         方向上的对齐方式
         space-between 会使子元素在主轴上平均分布，两端对齐，
         项目之间间隔相等，并且第一个和最后一个项目与容器边框
         之间有空白间隙
         */
        align-items: center;
        /* 
         align-items:conter;该属性用于定义Flex容器中子元素在
         交叉轴上的对齐方式。'center'的值使得子元素在交叉轴上居中
         对齐
        */
        padding: 10px;
    }
    
    .channel-menu {
        text-align: right;
        margin-right: 20px;
    }

    #hot-screen {
        display: flex;
        justify-content: space-between;
        /* justify-content: space-around; */
        align-items: flex-start;
        padding: 10px;
        flex-basis: 30%;
    }

    
</style>
<body>
<!-- 导航部分 -->
<div id="site-nav">
    <div id="site-nav-bd">
        <img src="images/site-nav.jpg" />
    </div>
</div>

<!-- 页面头部 -->
<div id="top-header">
    <div class="logo-search">
        <div class="logo"><img src="images/logo.jpg" /></div>
        <div class="search"><img src="images/search.jpg" /></div>
    </div>
    <div class="channel-menu"><img src="images/channel-menu.jpg" /></div>
</div>

<!-- 热门部分 -->
<div id="hot-screen">
    <div class="product-list"><img src="images/product-list.jpg" /></div>
    <div class="attraction"><img src="images/attraction.jpg" /></div>
    <div class="expressway"><img src="images/expressway.jpg" /></div>
</div>
</body>
</html>
